<template>
	<view class="wrap">
		<view class="luckbox">
			<view class="ranks">
				<view v-if="num != 1" class="list" v-for="(item, idx1) in num" :key="idx1">
					<text>{{ idx1 + 1 }}</text>
					<image v-if="idx > idx1" :src="jieguo[idx1].goods_image" mode=""></image>
				</view>
			</view>
			<view class="cbox1">
				<view class="item_contents">
					<view class="cons_list">
						<!-- {{goodsDetails}} -->
						<scroll-view scroll-x="true" class="scroll_list">
							<view class="lists_cons" :style="{ transform: 'translateX(' + moveX + 'rpx)', transition: miao + 's ease-in-out' }">
								<block v-for="(item, index) in goodsDetails" :key="index">
									<view :id="item.goods_id" class="detalis" >
										<!-- <image :src="item.goods_image" mode=""></image> -->
										<image :src="item.goods_image + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode=""></image>
										<view class="tit">
											{{ item.goods_title_text }}
										</view>

										<view class="price">{{$t('¥')}}{{ item.goods_price }}</view>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
					<!-- <view class="cons_list_mask"></view> -->
				</view>
			</view>

			<view class="di">
				<view class="stoppic" @click="tingzhi">
					<image src="../../static/image/enimg/O1CN01xAWoAp2JfEvrMCHia___2215984279448.png" mode="widthFix" style="margin-left: 20px;"></image>
					<text>{{ daojishi }}</text>
				</view>
				<view class="kai" @click="kaiqi">{{$t('一键开启')}}</view>
			</view>
		</view>

		<u-popup v-model="show" mode="center">
			<view class="result" :style="{ background: 'url(' + bgurl + ')', backgroundSize: '100% 100%' }">
				<u-navbar :custom-back="back" :immersive="true" back-icon-color="#fff" :border-bottom="false" :background="{ backgroundColor: '' }" title=" "></u-navbar>
				<view class="rbox">
					<view class="tit">
						<image src="http://m-oss.mhbox.top/uploads/20241207/f4a3655b91fdf0850598cfef70a1737a.png" mode="widthFix"></image>
					</view>
					<view class="goodsBox">
						<checkbox-group @change="checkboxChange" style="width: 100%">
							<view class="cbox" :class="'c' + num">
								<view class="list"  v-for="(item, idx) in jieguo" :key="idx">
									<view class="list" style="position: absolute; padding-right: 5%" @click="checkAlarm(idx)">
										<!-- <view class="price" style="position: absolute; top: -40rpx; color: #ff9800; padding-left: 10rpx">
											<image src="../../static/image/xr.png" mode="aspectFit" style="width: 20rpx; height: 20rpx"></image>
											{{ parseInt(item.luckycoin) }}
										</view> -->
										<checkbox :checked="item.isCheckeds" :value="'checkeds_' + idx" class="xuanze_kuang" @click="checkAlarm(idx)" />
									</view>
									<image :src="item.goods_image" mode=""></image>
									<view class="name" v-if="num != 10">
										{{ item.blind_box_text }}
									</view>
									<view class="price">{{$t('¥')}}{{ item.goods_price }}</view>
								</view>
							</view>
						</checkbox-group>
					</view>
					<view class="bottom" v-if="!isPay">
						<view class="btit" v-if="!isPay">*{{$t('试玩结果仅供参考')}}</view>
						<view class="btn" @click="jixu" v-if="istwo">{{$t('继续开盒')}} x10</view>
						<view class="btn" @click="palyTrue(boxId)" v-else>{{$t('来发真的试试')}}</view>
						<!-- <view class="btn" @click="$.to('/pages/home/kaixiang?id=' + boxId)" v-else>来发真的试试</view> -->
					</view>

					<view class="bottom" v-if="isPay">
						<view class="btit" v-if="!isPay">*{{$t('试玩结果仅供参考')}}</view>
						<view class="btn" @click="jixu" v-if="istwo">{{$t('继续开盒')}} x10</view>
						<view class="btn" @click="shou" v-if="!istwo">{{$t('全部收下')}}</view>
						<view class="btn" @click="yj_huishou" v-if="!istwo">{{$t('回收选中')}}</view>
						<view class="btn" @click="chongchou" v-if="!istwo">{{$t('再来一次')}}</view>
					</view>
					<!-- <view class="bottom" v-if="!isPay">
						<view class="btit" v-if="!isPay">*试玩结果仅供参考</view>
						<view class="btn" @click="jixu" v-if="istwo">继续开盒 x10</view>
						<view class="btn" @click="$.to('/pages/home/kaixiang?id=' + boxId)" v-else>来发真的试试</view>
					</view>

					<view class="bottom" v-if="isPay">
						<view class="btit" v-if="!isPay">*试玩结果仅供参考</view>
						<view class="btn" @click="jixu" v-if="istwo">继续开盒 x10</view>
						<view v-else>
							<view class="btn" @click="yj_huishou" style="margin-right: 20rpx">批量回收</view>
							<view class="btn" @click="shou">全部收下</view>
						</view>
					</view> -->
				</view>
			</view>
		</u-popup>

		<!-- 订单 -->
		<u-popup v-model="pl_huishou_show" mode="bottom">
			<view class="plhuishou-box">
				<view class="tit">{{$t('确认批量回收')}}</view>
				<view class="con">
					<view class="box1" style="max-height: 60vh; margin-bottom: 200rpx; overflow-y: auto">
						<view class="list" v-for="(item, idx) in fuxuan_huishou_data" :key="idx">
							<view class="info">
								<view style="color: red">{{$t('价值')}}：{{ item.luyck }}{{$t('幸运币')}}</view>
								<view style="margin: 10rpx 20rpx; border-bottom: 1rpx solid #f3f3f3; padding: 10rpx 0">{{ item.blind_box_text }}</view>
							</view>
						</view>
					</view>
				</view>
				<view style="background-color: #fff; position: fixed; bottom: 0; width: 100%">
					<view class="obtm" style="text-align: center; padding: 10rpx 0">{{$t('选中了')}}{{ huishou_num }}{{$t('个盒子进行回收')}}</view>
					<view class="obtm">
						<button @click="pl_huisou_sub">
							{{$t('立即回收')}}
							<text>{{ fuxuan_huishou_jindou }}{{$t('幸运币')}}</text>
						</button>
					</view>
					<view class="xieyi">
						<u-checkbox v-model="xieyi" shape="circle" active-color="#70DDE0" label-size="22">
							{{$t('我已满18岁，已阅读并同意')}}
							<text @click.stop="$.to('/pages/my/agreement?type=pay_tipstips')">《{{$t('支付服务协议')}}》</text>
						</u-checkbox>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const chou = 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/FinalVideo_1665316115.782023.mp3';
	const zhong = 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/zhongjiang.mp3';
	const choumusic = uni.createInnerAudioContext();
	const zhongmusic = uni.createInnerAudioContext();
	import config from '../../utils/config.js';
	const anjianyin = config.baseUrl + '/static/api/video/anjian.mp3';
	const anniumusic = uni.createInnerAudioContext();
	export default {
		name: 'horizontalScroll',
		data() {
			return {
				goodsDetails: [],
				winningId: '', //中奖id
				count: 5,
				winningIndex: 0, //中奖索引
				moveX: 0,

				miao: 5,
				show: false,
				boxId: '',
				bgurl: 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/csbg.webp', //抽奖背景
				boxUrl: 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/cs.png', //抽奖商品背景
				muteBgMusic: true,
				num: '', //几抽
				idx: 0, //当前抽的第几发
				jieguo: [], //抽中的全部商品
				yichou: [], //当前已经抽到的商品
				daojishi: 5, //倒计时
				ding: '', //倒计时定时器
				isKai: false, //是否一键开启
				istwo: false, //是否有二抽
				isPay: false, //是否正式抽
				ooid: '',
				twoPay: {}, //支付二十抽全部数据
				endTime: '',

				fuxuan_huishou_id: '',
				fuxuan_huishou_data: '',
				fuxuan_huishou_jindou: 0,
				pl_huishou_show: false, //批量回收弹窗
				huishou_num: 0,
				xieyi: true,
				huishou_ids: [],
				zhongjiangData: []
			};
		},
		watch: {
			goodsDetails: {
				handler(news) {
					console.log('触发');
					this.preMove();
				},
				immediate: true
			}
		},

		onLoad(option) {
			console.log(option);
			// #ifdef H5
			if (option.ooid) {
				this.boxId = option.boxid;
				if (option.num == 20) {
					this.num = 10;
					this.istwo = true;
				} else {
					this.num = option.num;
				}
				this.ooid = option.ooid;
				this.isPay = true;
				this.getData1(option.num);
				// this.getBox(option.boxid);
			}
			// #endif
			uni.$on('cdata', (data) => {
				console.log(data, '数据接收cdata');
				this.boxId = data.id;
				if (data.num == 20) {
					this.num = 10;
					this.istwo = true;
				} else {
					this.num = data.num;
				}
				this.isPay = false;

				this.getData();
				// this.getBox(data.id);
			});
			uni.$on('paydata', (data) => {
				console.log(data, '数据接收paydata');
				this.boxId = data.id;
				if (data.num == 20) {
					this.num = 10;
					this.istwo = true;
				} else {
					this.num = data.num;
				}
				this.ooid = data.ooid;
				this.isPay = true;
				this.getData1(data.num);
				// this.getBox(data.id);
			});
			uni.$on('kaidata', (data) => {
				console.log(data, '数据接收kaidata');
				this.boxId = data.boxfl_id;
				this.num = 1;
				this.isPay = true;
				this.getData2(data.id);
				// this.getBox(data.boxfl_id);
			});
		},
		onShow(){
			this.muteBgMusic = uni.getStorageSync('muteBgMusic');
			this.$music.playBgm({
				mute: true
			});
			choumusic.src = chou;
			console.log(choumusic);
			zhongmusic.src = zhong;
			anniumusic.src = anjianyin;
			uni.loadFontFace({
				family: 'myfont',
				source: 'url("https://m-admin.mhbox.top/YouSheBiaoTiHei.ttf")'
			});
		},
		onHide() {
			uni.$off('cdata');
			uni.$off('paydata');
			uni.$off('kaidata');
			zhongmusic.stop();
			this.$music.playBgm({
				mute: this.muteBgMusic
			});
		},
		onUnload() {
			uni.$off('cdata');
			uni.$off('paydata');
			uni.$off('kaidata');
			zhongmusic.stop();
			this.$music.playBgm({
				mute: this.muteBgMusic
			});
		},
		methods: {
			palyTrue(id) {
				// uni.navigateBack();
				uni.navigateTo({
					url:'/pages/home/kaixiang?id='+this.boxId+'&music='
				})
			},
			back() {
				// history.back()
				uni.switchTab({
					url: '/pages/tabBar/home'
				});
			},
			shou() {
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				});
			},
			shuffleArray(array) {
				for (let i = array.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[array[i], array[j]] = [array[j], array[i]];
				}
				return array;
			},
			getBox(id) {
				this.$http({
					url: 'api/common/get_blind_box_goods',
					data: {
						blind_box_id: id
					}
				})
					.then((res) => {
						if (res.data.code == 1) {
							const goodsList = this.shuffleArray(res.data.data.goods_list);
							const firstTen = goodsList.slice(0, 50);
							const lastTen = goodsList.slice(-20);
							let data = firstTen.concat(firstTen, this.zhongjiangData, lastTen);
							let unique = Array.from(new Set(data.map((item) => item.id))).map((id) => {
								return data.filter((item) => item.id === id)[0];
							});
							data = this.shuffleArray(unique);

							// zhongjiangData
							let jia = [];
							data.forEach((item, idx) => {
								jia.push({
									id: 10000 + idx,
									goods_image: item.goods_image,
									goods_name: item.goods_title_text,
									goods_title_text: item.goods_title_text,
									goods_price: item.goods_price,
									tag: item.odds_image_bg_text,
									bg: item.odds_image_bg_text
								});
							});
							let add = jia.concat();
							jia = jia.concat(data);
							if (jia.length < 40) {
								for (var i = 0; i < 40; i++) {
									if (jia.length >= 40) {
										break;
									}
									jia.unshift(...add);
								}
							}
							jia = jia.concat(add);
							jia.forEach((item) => {
								item.tag = item.odds_image_bg_text || item.bg;
							});
							console.log(jia, '处2222222222222222222222理数据');
							this.goodsDetails = jia;
						}
					})
					.catch((err) => {});
			},
			// 开始抽奖
			state() {
				console.log('——————开始抽奖——————');
				this.winningId = this.jieguo[this.idx].id;
				console.log(this.winningId, '抽中的id');
				this.daojishi = 5;
				this.preMove();
				choumusic.play();
				this.ding = setInterval(() => {
					this.daojishi -= 1;
					if (this.daojishi <= 0) {
						this.daojishi = 0;
					}
				}, 1000);
				this.end();
			},
			chongchou() {
				uni.navigateTo({
					url:'/pages/home/kaixiang?id='+this.boxId+'&music='
				})
			},
			getData() {
				this.$http({
					url: 'api/member/test_open_prize',
					data: {
						boxid: this.boxId,
						num: this.num
					}
				})
			    .then((res) => {
			    	console.log(res, '抽中的商品');
			    	res.data.data.forEach((item) => {
			    		item.isCheckeds = false;
			    	});
			    	if (res.data.code == 1) {
			    		this.zhongjiangData = res.data.data;
			    		// this.changeBg(res.data.data)
			    		this.changeBg(res.data.data);
			    	}
			    })
			    .catch((err) => {});
			},

			getData1(num) {
				this.isLoading = true;
				uni.showLoading({
					title: this.$t('正在获取盲盒商品')+'...'
				});
				console.log(num, '几抽');
				this.$http({
					url: 'api/blind_box/open',
					data: {
						order_no: this.ooid
					}
				})
					.then((res) => {
						uni.hideLoading();
						console.log(res.data.data, '———————————res.data.data.data—————————getData11抽中的商品');
						if (res.data.code == 1) {
							this.zhongjiangData = res.data.data;

							res.data.data.forEach((item) => {
								item.isCheckeds = true;
							});
							// num = res.data.data.length
							if (num == 20) {
								// this.num = 10;
								// this.istwo = true;
								var data = res.data.data;
								var one = data.slice(0, 10);
								var two = data.slice(10, 20);
								this.twoPay = {
									one: one,
									two: two
								};
								console.log(this.twoPay, '分开的数据');
								// this.jieguo = this.twoPay.one
								this.changeBg(this.twoPay.one);
							} else {
								console.log('_humy____________---');
								// this.jieguo = res.data.data.data
								this.changeBg(res.data.data);
							}

							// console.log(this.jieguo,"抽中结果");
						}
					})
					.catch((err) => {});
			},
			getData2(id) {
				this.$http({
					url: 'index.php/api/index/getOnea',
					header: {
						// "Content-Type": "application/json",
						token: uni.getStorageSync('user').token
					},
					data: {
						id: id
					}
				})
					.then((res) => {
						console.log(res, '盲盒');
						if (res.data.code == 1) {
							this.zhongjiangData = res.data.data;
							this.changeBg(res.data.data.data);
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			// 抽中商品换背景
			changeBg(data) {
				console.log(data, '换背景212');
				data.forEach((item, idx) => {
					item.bg = item.odds_image_bg_text;
				});
				this.jieguo = data;
				this.zhongjiangData = data;
				this.getBox(this.boxId);
				setTimeout(() => {
					this.state();
				}, 500);
				console.log(this.jieguo, '结果');
			},
			checkAlarm(index) {
				// alert(this.winPrice[index].isCheckeds);
				// this.jieguo[index].isCheckeds = !this.jieguo[index].isCheckeds; //取反
				this.$set(this.jieguo, 'isCheckeds', !this.jieguo[index].isCheckeds);
			},
			tingzhi() {
				// return;
				// console.log('nh nnnnnnnnnnnnnnnn')
				// this.winningIndex = 1;
				// this.end()
				anniumusic.play();
				if (this.daojishi <= 1) {
					return;
				}
				clearInterval(this.ding);
				clearTimeout(this.endTime);
				choumusic.stop();
				zhongmusic.play();
				this.miao = 1;
				this.daojishi = 0;
				this.winningIndex = this.goodsDetails.findIndex((item) => item.id == this.winningId);
				const randomNum = Math.floor(Math.random() * (260 - 120 + 1)) + 120; // 随机滚动补差数据确保滚动在中奖条目范围内
				// alert(randomNum);
				console.log(this.winningIndex, 'this.winningIndex----');
				// this.moveX = (-282 * this.winningIndex - 1) + randomNum + 50 //282 宽度258+右边距24
				// #ifdef MP-WEIXIN
				this.moveX = -281 * this.winningIndex - 1 + randomNum + 50; //282 宽度258+右边距24
				// #endif
				// #ifdef APP-PLUS || H5
				this.moveX = -281 * this.winningIndex - 1 + randomNum + 50; //282 宽度258+右边距24
				// #endif
				console.log(this.moveX);
				// return;

				this.yichou = this.jieguo[this.idx];
				console.log(this.yichou, '一抽');
				this.idx++;
				// return;
				if (this.idx >= this.jieguo.length) {
					setTimeout(() => {
						this.show = true;
						return;
					}, 2500);
				}
				if (this.num == this.idx) {
					return false;
				}
				setTimeout(() => {
					this.miao = 0;
					this.moveX = 0;
				}, 2000);
				if (!this.isKai) {
					setTimeout(() => {
						this.miao = 5;
						this.state();
					}, 2500);
				}
			},
			end() {
				this.endTime = setTimeout(() => {
					clearInterval(this.ding);
					this.yichou = this.jieguo[this.idx];
					console.log(this.yichou, '一抽');
					choumusic.stop();
					if (!this.isKai) {
						zhongmusic.play();
					}
					this.idx++;
					if (this.idx >= this.jieguo.length) {
						setTimeout(() => {
							this.show = true;
						}, 2500);
						return;
					}
					setTimeout(() => {
						this.miao = 0;
						this.moveX = 0;
					}, 900);
					if (!this.isKai) {
						setTimeout(() => {
							this.miao = 5;
							this.state();
						}, 1000);
					}
				}, 5000);
			},

			// 一键开启
			kaiqi() {
				choumusic.stop();
				zhongmusic.play();
				this.isKai = true;
				this.daojishi = 0;
				this.$forceUpdate();
				this.show = true;
			},

			// 二十发二次开盒
			jixu() {
				this.miao = 0;
				this.moveX = 0;
				clearTimeout(this.endTime);
				this.num = 10;
				this.istwo = false;
				this.idx = 0;
				this.jieguo = [];
				this.yichou = [];
				this.daojishi = 5;
				this.isKai = false;
				clearInterval(this.ding);
				setTimeout(() => {
					this.miao = 5;
					if (this.isPay) {
						this.jieguo = this.twoPay.two;
						this.changeBg(this.twoPay.two);
					} else {
						this.getData();
					}
					// this.getBox(this.boxId)
					this.show = false;
				}, 300);
			},

			// 拿到数据之后执行 需要保证中奖数据不在最后5条中
			preMove() {
				console.log(this.winningId, '抽中的idwinningIdthis________');
				console.log(this.goodsDetails, '___preMove__');
				console.log(this.winningId, 'this.winningIdthis.winningId');
				this.winningIndex = this.goodsDetails.findIndex((item) => item.id == this.winningId);
				const randomNum = Math.floor(Math.random() * (260 - 120 + 1)) + 120; // 随机滚动补差数据确保滚动在中奖条目范围内
				console.log(this.winningIndex, 'this.winningIndex----');
				this.moveX = -281 * this.winningIndex - 1 + randomNum + 50; //282 宽度258+右边距24
			},

			yj_huishou() {
				let xuanzhong_id = [];
				this.jieguo.forEach(function (item, index) {
					if (item.isCheckeds == true) {
						xuanzhong_id.push(index);
					}
				});
				this.huishou_ids = xuanzhong_id;
				uni.redirectTo({
					url: '/pages/cangku/piliang_edit?type=1'
				});
				setTimeout(() => {
					uni.$emit('qu_pl_huishou', {
						ids: this.huishou_ids
					});
				}, 600);
				// this.fuxuan_huishou_id = [];
				// this.jieguo.forEach((item) => {
				// 	// alert(item.isCheckeds);
				// 	if (item.isCheckeds == true) {
				// 		this.fuxuan_huishou_id.push(item.box_prize_record_id);
				// 	}
				// });
				// this.fuxuan_huishou_id = this.fuxuan_huishou_id.toString();
				// this.$http({
				// 	url: 'index.php/api/order/fuxuan_huishou_data',
				// 	header: {
				// 		// "Content-Type": "application/json",
				// 		token: uni.getStorageSync('user').token
				// 	},
				// 	data: {
				// 		ids: this.fuxuan_huishou_id
				// 	}
				// })
				// 	.then((res) => {
				// 		if (res.data.code == 1) {
				// 			this.fuxuan_huishou_data = res.data.data.list;
				// 			this.fuxuan_huishou_jindou = res.data.data.jindou_num;
				// 			this.huishou_num = res.data.data.count;
				// 			// console.log("this.fuxuan_huishou_data: " + JSON.stringify(res.data.data));
				// 		}
				// 	})
				// 	.catch((err) => {});
				// this.pl_huishou_show = !this.pl_huishou_show;
			},
			pl_huisou_sub() {
				//确定批量回收
				if (this.fuxuan_huishou_id == '') {
					this.$tip.tip(this.$t('请选中需要回收的盒子再提交！'));
					return;
				}
				var xuanzhongdeids = this.fuxuan_huishou_id.split(',');
				this.$http({
					url: 'index.php/api/user/exchange',
					header: {
						// "Content-Type": "application/json",
						token: uni.getStorageSync('user').token
					},
					data: {
						id: xuanzhongdeids
					}
				})
					.then((res) => {
						if (res.data.code == 1) {
							this.pl_huishou_show = !this.pl_huishou_show;
							this.$tip.tip(this.$t('回收成功'));
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/tabBar/home'
								});
							}, 2000);
						} else {
							this.$tip.tip(res.data.msg);
						}
					})
					.catch((err) => {});
			},
			checkAlarm(index) {
				console.log('alarm', index);
				var invoice = this.jieguo[index]; //变量 invoice == 数组每一项索引
				if (invoice) {
					// alert(1);
					invoice.isCheckeds = !invoice.isCheckeds; //取反
				}
			}
		}
	};
</script>

<style scoped>
	.item_contents {
		width: 100%;
		background: url('../../static/image/enimg/ql.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 182rpx;
		height: 662rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}

	.cons_list {
		display: inline-block;
		padding-left: 32rpx;
		box-sizing: border-box;
	}

	.scroll_list {
		width: 100%;
		height: 374rpx;
	}

	.lists_cons {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.detalis {
		width: 258rpx;
		height: 374rpx;
		margin-right: 24rpx;
		position: relative;
		background-size: 100% 100% !important;
		text-align: center;
		box-sizing: border-box;
	}

	.detalis image {
		width: 150rpx;
		height: 150rpx;
		margin-top: 80rpx;
	}

	.detalis .tit {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: 10rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 0 16rpx;
	}

	.detalis .price {
		color: #fff;
		margin-top: 10rpx;
		font-family: 'myfont';
	}

	/* ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	} */

	.cons_list_mask {
		width: 100%;
		height: 662rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0);
	}
</style>
<style>
	@import url('../../static/css/luckbox.css');
</style>
